<template>
  <!-- tooltip-effect="dark" -->
  <div class="admin_table">
    <el-table ref="multipleTable" :stripe="tableHead.stripe" :show-summary="tableHead.summary" :summary-method="getSummaries" :data="tableData" style="width: 100%" :row-key="tableHead.keyId"
      :row-class-name="boldFun" @selection-change="(e)=>selectChange(e,tableHead.selection)" :border="tableHead.border" :empty-text="tableHead.noDataText">
      <el-table-column type="selection" width="44" align="center" v-if="tableHead.selection">
      </el-table-column>
      <el-table-column type="index" :width="tableHead.order.width" align="center" label="序号" v-if="tableHead.order">
      </el-table-column>

      <el-table-column v-for="(item, index) in tableHead.data" :label="item.name" :fixed="item.fixed" :width="item.width" :key="index" 
        :prop="item.key" header-align="center" :align="item.align?item.align:'left'"
        :class-name="item.prompt?'message':''">

        <template  slot="header" slot-scope="scope">
          <div class="tabel_head_btn_box" v-if="item.setFunction">
            <el-button v-if="index == 0 && weekIndex != 0" v-for="(items, index) in item.setFunction" :key="index" @click="forwards(items.fun,scope.row)" type="primary" size="small">{{items.name}}</el-button>
            <span class="tabel_head_btn_label">{{weekName}}</span>
            <el-button v-if="index == 1 && weekIndex != maxWeekNum - 1" v-for="(items, index) in item.setFunction" :key="index" @click="forwards(items.fun,scope.row)" type="primary" size="small">{{items.name}}</el-button>
          </div>

          <span v-else>{{item.name}}</span>
        </template>

        
        <!-- 多级表头 -->
        <template v-if="item.children">
          <el-table-column 
            v-for="(childItem, index) in item.children" 
            :key="index"
            :label="childItem.name"
            :width="childItem.width"
            :prop="childItem.key" 
            :align="childItem.align?childItem.align:'left'"
            :class-name="childItem.prompt?'message':''"
            header-align="center"
          >
            <template slot-scope="scope">
              <span v-if="childItem.dbFun && childItem.filter" @dblclick="forwards(childItem.dbFun,scope.row)"
                style="cursor:pointer; ">{{childItem.filter[scope.row[childItem.key]]}}</span>
              <span v-else-if="childItem.filter">{{childItem.filter[scope.row[childItem.key]]}}</span>
              <span v-else-if="childItem.filter_plus"
                :style="{color:childItem.filter_plus[scope.row[childItem.key]].color}">{{childItem.filter_plus[scope.row[childItem.key]].con}}
              </span>
              <span v-else-if="childItem.fun" @click="forwards(childItem.fun,scope.row)"
                style="cursor:pointer; color:#458afb;">{{scope.row[childItem.key]}}</span>
                
              <span v-else-if="childItem.dbFun" @dblclick="forwards(childItem.dbFun,scope.row)"
                style="cursor:pointer; color:#458afb;">{{scope.row[childItem.key]}}</span>

              <span v-else-if="childItem.url">
                <router-link :to="{ name: childItem.url, params: scope.row}"
                  :style="{width:'100%',height:'100%',display:'block',color:childItem.color}">
                  {{scope.row[childItem.key]}}
                </router-link>
              </span>

              <span v-else-if="childItem.urlSkip" @click="jumps(childItem.urlSkip,scope.row)"
                :style="{cursor:'pointer',color: scope.row[childItem.key]==0? '':childItem.color ,textDecoration:'underline'}">{{scope.row[item.key]}}</span>

              <span v-else v-html="scope.row[item.key][childItem.key]"></span>
            </template>
          </el-table-column>
        </template>
        <!-- 多级表头end -->


        <template  slot-scope="scope">
          <span v-if="item.dbFun && item.filter" @dblclick="forwards(item.dbFun,scope.row)"
            style="cursor:pointer; ">{{item.filter[scope.row[item.key]]}}</span>
          <span v-else-if="item.filter">{{item.filter[scope.row[item.key]]}}</span>
          <!-- <span class="progressBar" v-if="item.progressBar">123</span> -->
          <span v-else-if="item.filter_plus"
            :style="{color:item.filter_plus[scope.row[item.key]].color}">{{item.filter_plus[scope.row[item.key]].con}}
          </span>
          <span v-else-if="item.fun" @click="forwards(item.fun,scope.row)"
            style="cursor:pointer; color:#458afb;">{{scope.row[item.key]}}</span>
            
          <span v-else-if="item.dbFun" @dblclick="forwards(item.dbFun,scope.row)"
            style="cursor:pointer; color:#458afb;">{{scope.row[item.key]}}</span>

          <span v-else-if="item.url">
            <router-link :to="{ name: item.url, params: scope.row}"
              :style="{width:'100%',height:'100%',display:'block',color:item.color}">
              {{scope.row[item.key]}}
            </router-link>
          </span>

          <span v-else-if="item.urlSkip" @click="jumps(item.urlSkip,scope.row)"
            :style="{cursor:'pointer',color: scope.row[item.key]==0? '':item.color ,textDecoration:'underline'}">{{scope.row[item.key]}}</span>

          <span v-else v-html="scope.row[item.key]" ></span>

          <div class="progressBar" v-if="item.progressBar" :style="{width: computedWidth(scope.row[item.key]), backgroundColor:item.progressBar, color:'transparent', }">.</div>
        </template>

      </el-table-column>

      <el-table-column v-if="tableHead.switch" label="状态" align="center" width="60">
        <template slot-scope="scope">
          <el-switch
            @click.native="forwards(tableHead.switch.fun,scope)"
            v-model="scope.row.isActive"
            active-color="#13ce66"
            inactive-color="#909399">
          </el-switch>
        </template>
      </el-table-column> 

      <el-table-column :width="tableHead.operation_width?tableHead.operation_width+'px':''" align="center"
        v-if="tableHead.setFunction" label="操作">
        <template slot-scope="scope">
          <span v-for="(item, index) in tableHead.setFunction" :key="index"
            v-if="!tableHead.forbiddenParent||!scope.row.children">
            <template v-if="item.hideKey">
              <el-button v-if="item.hideState && item.hideState==scope.row[item.hideKey]" size="mini"
                @click.native="forwards(item.fun,scope)" :style="{color:item.color}">
                {{item.name}}
              </el-button>
              <el-button v-if="item.showState && item.showState!=scope.row[item.hideKey]" size="mini"
                @click.native="forwards(item.fun,scope)" :style="{color:item.color}">
                {{item.name}}
              </el-button>
            </template>
            <template v-else>
              <span class="btn_no_border" v-if="item.border == false" @click="forwards(item.fun,scope)" >{{item.name}}<span class="line" v-if="item.hasLine"> / </span></span>
              
              <el-button v-else size="mini" @click.native="forwards(item.fun,scope)"
                :style="{color:item.color,'margin':'4px'}">{{item.name}}
              </el-button>
            </template>
          </span>
        </template>
      </el-table-column>
      <el-table-column :width="tableHead.check.operation_width?tableHead.check.operation_width+'px':''" align="center"
        v-if="tableHead.check" label="权限操作">
        <template slot-scope="scope">
          <span v-for="(item, index) in tableHead.check" :key="index">
            <el-checkbox v-model="scope.row[item.id]" @change.native="forwards(item.fun,scope)"></el-checkbox>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss">
  .admin_table {
    width: 100%;
    .cell{
      position: relative !important;
      span {
        position: relative;
        z-index: 1;
      }
    }
    .progressBar{
      position: absolute;
      left: 0;
      top: 0;
      transition: width .4s linear;
      -webkit-transition: width .4s linear;
    }

    .tabel_head_btn_box{
      width: 100%;
    }
    .tabel_head_btn_box .el-button--small{
      padding: 6px 12px;
    }
    .tabel_head_btn_label{
      display: inline-block;
      padding: 0 12%;
      box-sizing: border-box;
    }
    .btn_no_border{
      cursor: pointer;
    }

    .btn_no_border:hover{
      color: #FBA56C;
    }
    .btn_no_border:hover .line {
      color: #909399;
    }
    

    .el-table .bold_class .message span {
      position: relative;
    }

    .el-table .bold_class .message span::before {
      color: #f00;
      transform: scale(1.2);
      content: "●";
      line-height: 100%;
      height: 100%;
      position: absolute;
      left: -14px;
      bottom: -1px;

    }

    .el-icon-arrow-right:before {
      color: #458afb;
      font-weight: bold;
    }
  }

</style>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      forwards(fun, scope) {
        fun(scope)
      },
      jumps(names, parData) {
        const {
          href
        } = this.$router.resolve({
          name: names,
          query: {
            id: parData.projectId
          }
        })
        window.open(href, '_blank');
      },
      selectChange(data, fun) {
        if (fun) {
          if(this.tableHead.selectType == 'radio') {
            if(data.length > 1) {
              this.$refs.multipleTable.clearSelection()
              this.$refs.multipleTable.toggleRowSelection(data.pop())
              console.log(data);
              return;
            }else{
              
            }
          }
            
          fun.fun(data)
        }
      },
      boldFun({
        row,
        rowIndex
        }) {
          if (this.tableHead.boldKey) {
            if (row[this.tableHead.boldKey] == this.tableHead.boldStatus) {
              return "bold_class";
            }
          }

      },

      
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if(index == 1) {
            sums[index] = 'N/A';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            // sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }

    },

    computed: {
      weekName() {
        let list = ['第1期','第2期','第3期','第4期','第5期','第6期']
        return list[this.weekIndex]
      },
      // computedColor() {
      //   return function(val) {
      //     val = parseFloat(val);
      //     console.log(val);
      //     // console.log(Number('aaaa') > 60);
      //     if(Number(val) > 55) {
      //       return '#fff'
      //     }else{
      //       return '#909399'
      //     }
      //   }
      // },
      computedWidth() {
        return function(val) {
          let str = Number(parseFloat(val))
          if(!isNaN(str)) {
            return parseFloat(val) + '%';
          }else{
            return 0;
          }
        }
      }
    },
    props: ['tableHead', 'tableData', 'weekIndex', 'maxWeekNum']
  }

</script>
